<template>
  <div id="batchAddUserAuthorization">

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>授权</el-breadcrumb-item>
      <el-breadcrumb-item>用户授权</el-breadcrumb-item>
      <el-breadcrumb-item>批量添加</el-breadcrumb-item>
    </el-breadcrumb>

    <el-form :inline="true" class="query-form" label-width="6rem">
      <el-form-item label="业务系统">
        <el-select v-model="systemsvalue" placeholder="请选择业务系统" disabled>
          <el-option v-for="item in systems" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="系统角色">
        <el-select v-model="rolesvalue" placeholder="请选择系统角色" disabled>
          <el-option v-for="item in roles" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">保存</el-button>
      </el-form-item>
      <el-form-item>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

    <el-transfer v-model="value1" filterable :filter-method="filterMethod" filter-placeholder="请输入用户姓名或账号" :data="data" :titles="['用户列表','授权用户列表']"></el-transfer>

  </div>
</template>

<style>
.query-form {
  margin-top: 20px;
  padding-top: 25px;
  background-color: #f2f2f2;
}

#batchAddUserAuthorization .el-transfer {
  margin: 20px auto;
}

#batchAddUserAuthorization .el-transfer .el-transfer-panel {
  width: calc(50% - 49px);
  height: calc(100vh - 260px);
}

#batchAddUserAuthorization .el-transfer .el-transfer-panel__list {
  height: calc(100vh - 362px);
}
</style>

<script>
export default {
  name: "BatchAddUserAuthorization",
  data() {
    const generateData = _ => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `王小虎 ${i} wang.xiaohu`,
          disabled: i % 4 === 0
        });
      }
      return data;
    };
    return {
      data: generateData(),
      value1: [1, 4],
      filterMethod(query, item) {
        return item;
      },
      systems: [
        {
          value: "5b0391fb0677967be4799fbb",
          label: "公共服务投票"
        }
      ],
      systemsvalue: "5b0391fb0677967be4799fbb",
      roles: [
        {
          value: "5b03e00770331f4e64e7ad41",
          label: "系统管理员"
        }
      ],
      rolesvalue: "5b03e00770331f4e64e7ad41"
    };
  },
  methods: {}
};
</script>
